<template>
  <div class="app-container">
    <div class="aa">
      <el-form
        label-width="80px"
        ref="form_change"
        :model="detail"
        :rules="rules"
      >
        <el-form-item label="标题" prop="title">
          <el-input style="width: 30%" v-model="detail.title"></el-input>
        </el-form-item>
        <el-form-item label="目录ID" prop="catalogue_id">
          <el-select
            style="width: 30%"
            clearable
            v-model="detail.catalogue_id"
            placeholder="目录ID"
          >
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="(item, index) in index_list || []"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="序号" prop="sequence">
          <el-input style="width: 30%" v-model="detail.sequence"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <quill-editor
            ref="text"
            style="height: 380px"
            v-model="detail.content"
            class="myQuillEditor"
            :options="editorOption"
          />
        </el-form-item>
      </el-form>
      <div class="footers">
      <el-button @click="changePage">返回</el-button>
      <el-button type="primary" @click="edit03">确 定</el-button>
    </div>
    </div>
    
  </div>
</template>

<script>
// import "quill/dist/quill.core.css";
// import "quill/dist/quill.snow.css";
// import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
import {
  getDetailsTutorial_manage,
  getCatalogue_manage,
  editTutorials_manage,
} from "@/api/manage";
export default {
  created() {
    // this.getDetailsTutorial_manage(this.$route.params.id);
  },
  data() {
    return {
      detail: {},
      index_list: [{}],
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        catalogue_id: [
          { required: true, message: "请输入目录ID", trigger: "blur" },
        ],
        sequence: [{ required: true, message: "请输入序号", trigger: "blur" }],
        content: [{ required: true, message: "内容", trigger: "blur" }],
      },
      editorOption: {},
    };
  },
  methods: {
    edit03() {
      editTutorials_manage({
        id: this.$route.params.id,
        title: this.detail.title,
        catalogue_id: this.detail.catalogue_id,
        sequence: this.detail.sequence,
        content: this.detail.content,
      }).then((res) => {
        if (res.status == 0) {
          this.$message({
            type: "success",
            message: res.msg,
          });
          this.changePage();
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    changePage() {
      this.$router.push({
        path:'/systemsManage/course'
      });
    },
    getDetailsTutorial_manage(id) {
      getDetailsTutorial_manage({ id }).then((res) => {
        this.detail = res.data[0];
      });
    },
    getCatalogue_manage() {
      getCatalogue_manage({}).then((res) => {
        this.index_list = res.data.list;
      });
    },
  },
  components: {
    quillEditor,
  },
};
</script>

<style scoped lang='less'>
.footers{
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%);
}
.app-container{
  height: 100%;
}
</style>
